Feliz año nuevo a todos

Os abrazo, y con mi abrazo me gustaría transmitir mis deseos de PAZ y SALUD para todos.
Ojalá que este año que está a punto de comenzar inunde nuestros corazones de esperanza y nos haga fuertes para soportar todo lo que la vida nos va deparando.
Que no falte nunca el amor en vuestras vidas y ¡que no falte trabajo!

!!Feliz Año a todos, que se cumplan todos vuestros sueños¡¡

Mobily Blocks es un menú creado con un plugin de jQuery y como podemos ver ademas de su vistosidad tiene una bonita animación que yo he aprovechado sustituyendo las imágenes por unas acordes para estas fechas.

Antes de decidirse por este menú debemos de tener en cuenta el espacio que vamos a necesitar y la utilidad que deseamos darle ya que dependiendo de eso serán las imágenes que le añadiremos.

Buscamos ]]></b:skin> y justo antes añadimos los estilos del menú

.nature {
display:block;
width:150px;
height:150px;
background:url(http://1.bp.blogspot.com/-9dUfdViRtXI/TvRyEoPUchI/AAAAAAAASQM/43V4slSwJKQ/s1600/1--.png) no-repeat;
cursor:pointer;
position:relative;
}
 .nature {
clear:both;
margin:0 auto;
z-index:2;
}
ul.reset,
ul.reset li {
display:block;
list-style:none;
padding:0;
margin:0;
}
ul.reset li {
position:absolute;
}
ul.reset li a {
outline:none;
}
a img {
border:none;
}

Después nos situaremos justo antes de </head> y añadiremos la librería que es la siguiente línea en rojo.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>

Si ya la estamos utilizando omitimos ese paso y procedemos a copiar el contenido de este archivo para pegarlo justo después de la librería jQuery. Y por último editamos un nuevo gadget de html y en su interior añadimos lo siguiente:

<div class="nature">
<ul class="reset" style="display: block; z-index: 50; opacity: 0;">
<li style="top: 0px; left: 0px; z-index: 49;">
<a href="#">
<img alt="" src="http://3.bp.blogspot.com/--uWHnmxtwj8/TvRq5Dr8ZaI/AAAAAAAASNs/Pww-urqkw18/s1600/2-.png" />
</a>
</li>
<li style="top: 0px; left: 0px; z-index: 49;">
<a href="#">
<img alt="" src="http://1.bp.blogspot.com/-R0O-TVnn6Tc/TvRq5f3JpxI/AAAAAAAASN8/-vCykNp7sWA/s1600/3-.png" />
</a>
</li>
<li style="top: 0px; left: 0px; z-index: 49;">
<a href="#">
<img alt="" src="http://1.bp.blogspot.com/-jGpH-siqWRI/TvRrbOHitHI/AAAAAAAASPo/qIcoMjTf9p8/s1600/10-.png" />
</a>
</li>
<li style="top: 0px; left: 0px; z-index: 49;">
<a href="#">
<img alt="" src="http://2.bp.blogspot.com/-Gqp3fLaeJ2g/TvRq6EOHn3I/AAAAAAAASOU/T4VBCbe2DJU/s1600/5-.png" />
</a>
</li>
<li style="top: 0px; left: 0px; z-index: 50;">
<a href="#">
<img alt="" src="http://3.bp.blogspot.com/-8G5bwU6dS5w/TvRsKbn_rhI/AAAAAAAASQA/rZN7ZP8wqMo/s320/6-.png" />
</a>
</li>
<li style="top: 0px; left: 0px; z-index: 49;">
<a href="#">
<img alt="" src="
http://1.bp.blogspot.com/-rrqq8WFQBqA/TvRq5GmmraI/AAAAAAAASNk/bIzejcJTLwI/s1600/1-.png" />
</a>
</li>
<li style="top: 0px; left: 0px; z-index: 49;">
<a href="#">
<img alt="" src="http://4.bp.blogspot.com/-NFHTvUeUthQ/TvRrNymuvWI/AAAAAAAASPE/neXCwSp-DwQ/s1600/8-.png" />
</a>
</li>
<li style="top: 0px; left: 0px; z-index: 49;">
<a href="#">
<img alt="" src="http://4.bp.blogspot.com/-88siA7EtQvI/TvRrbFvpueI/AAAAAAAASPc/iti9TnFS6nA/s1600/9-.png" />
</a>
</li>
</ul>
<a class="trigger" style="display: block; position: absolute; z-index: 1; top: 0px; left: 0px; width: 100%; height: 100%;"></a>
</div>

En ese código estamos añadiendo las imágenes que las podemos sustituir por otras teniendo en cuenta que miden 150x150 y que son en formato png.

Para añadir la url de los enlaces o los sitios que deseamos enlazar debemos sustituir la almohadilla <a href="#"> por la url de cada enlace.

Todo tuyo Manu.

Cuando compartimos nuestro perfil en las redes sociales añadimos enlaces o iconos en dichas redes o en nuestro blog para ser localizados ya sea para compartir algo, como medio de comunicación o simplemente entretenimiento.

Cuando queremos informar de todos esos sitios entonces nos creamos una "landing page" llamadas también "páginas de aterrizaje" que no es otra cosa que una página única cuya utilidad o finalidad es la de promocionar algo.

http://about.me/gemablog

Cualquiera con unos minutos para dedicarle puede hacer su landing page solo debe acceder a about.me y allí nos damos de alta ingresando tres datos:

• Enter an Email Address (añadimos nuestro e-mail)

• Create a Password (creamos una contraseña)

• Pick an About.me URL ( es el nombre que aparecerá en la url, por ejemplo http://about.me/gemablog)

La personalización es muy intuitiva y la podemos hacer desde la pestaña Edit Profile que nos proporciona un pequeño menú para escoger imagen y color de fondo, añadir una biografía, colores de texto y enlaces, tipos y tamaño de fuente, contacto y servicios en los que estamos.

Para poder añadir esos servicios o redes sociales debemos aceptar ingresando en nuestro sitio para permitir la aplicación. También podemos añadir cualquier url o crear enlaces.

Si ingresamos en la pestaña "Dashboard" comprobaremos las estadísticas de nuestro sitio y sabremos cuantas visitas tuvimos o la cantidad de enlaces a nuestro sitio.

Llegan las fechas navideñas y con ellas la costumbre de felicitar a familiares y amigos.

Buscamos ideas y entre esas ideas no puede faltar la típica tarjeta de felicitación que podemos personalizar ya sea con nuestra imagen personal o el logotipo de nuestra página.

Este sitio lo he conocido esta misma tarde, puedes escoger y obtener tus mejores felicitaciones de Navidad con Photo Montager

La url del sitio sale impreso en los resultados que nos da pero yo lo retoqué un poquito para ver como quedaba y lógicamente queda a decisión de cada uno si dejarlo o no.

Escoger el color de nuestra plantilla puede ser una tarea que nos lleve tiempo decidirnos o quizás lo tengamos muy claro desde el primer momento.

La temática del sitio influye especialmente en la decisión. Los sitios dedicados a bebés, servicios médicos o tecnología se decantan por tonos azulados y en esta decisión tiene mucho que ver lo que nos trasmiten los colores.

El color azul nos transmite calma y seguridad, nos recuerda el cielo y el mar.

Junto a otros colores como el naranja o el verde se obtienen combinaciones alegres mientras que con el gris o el negro aportan elegancia y austeridad.

Todas estas plantillas y algunas más en reinventaWEB

ICONFINDER

deviantART

Dirceu Veiga

deviantART

Iconshock

Archigraphs Christmas icons

Size: 5,7 mb
Formato: JPG (1600 x 1200 px)
Licencia: Free for personal use.
Descarga: Year Texture

No todos los menús deben ser horizontales ni tampoco las etiquetas deben ser una nube, un menú vertical también nos ayuda a mantener ordenado nuestro espacio.

Los enlaces van a gusto y necesidad de cada uno si no tenemos demasiadas etiquetas un menú vertical es una forma vistosa de mostrarlas. Aunque, lo más usual es que nuestro menú sea simplemente una tarjeta de presentación donde irá nuestro mail, perfil, portfolio.

¿Y por qué no? los sitios para localizarnos o dicho de otro modo las ya imprescindibles redes sociales.

Nuestro menú tiene un efecto que se consigue con la propiedad transform ¿quieren saber que es con lujo de detalles? el post "Transformaciones con CSS"de Vagabundia nos lo aclara y muestra lo que podemos llegar conseguir.

Para los que quieren un menú sin efecto simplemente eliminando la propiedad en los estilos de transform li:hover es suficiente.Los colores y tamaño no es problema, ya está marcado el lugar para cambiar si así se desea.

Vamos a simplificar la tarea y para eso incluimos todo lo necesario en un gadget de HTML, al terminar guardamos los cambios y arrastramos el gadget al lugar indicado.

Hay que tener en cuenta que dependiendo de la anchura de nuestra sidebar es el ancho que debemos dar a nuestro menú.

Y este es el contenido del gadget.

<style>#transform ul {
background: none repeat scroll 0 0 transparent;
list-style: none outside none;
}
#transform ul li {
background: url("url-imagen") repeat scroll #B599C1; /* imagen y color de fondo */
border-bottom: 1px solid #fff; /* borde inferior */
color: #ffffff; /* color texto */
text-shadow: 1px 2px 2px #505050; /* sombra del texto */
list-style: none outside none;
padding: 5px; /* separación texto y borde */
width: 230px; /* ancho del menú */
}
#transform li a:link {
color: white; /* color enlace */
}
#transform li:hover {
-moz-transform: scale(1.15); /* efecto hover transform */
background-color: #6F4062; /* color de efecto hover */
}
</style>

<div class="text-align:center;">
<div id="transform">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Enlace 1</a></li>
<li><a href="#">Enlace 2</a></li>
<li><a href="#">Enlace 3</a></li>
<li><a href="#">Enlace 4</a></li>
</ul>
</div></div>

Configuramos los enlaces de la siguiente forma:
<a href="#">Enlace 1</a>

Sustituimos la almohadilla por la url del sitio a enlazar y el texto Enlace 1-2-3 y 4 por el texto que hace de enlace.

Hay una entrada de Pizcos que trata como su título indica sobre un "Carrousel automático con las imágenes de las entradas de tu blog"

Los pasos a seguir son muy sencillos y el resultado es muy vistoso solo hay que ubicar cada código proporcionado en el sitio correspondiente y queda a gusto de cada uno personalizar las imágenes.

Por costumbre modifico la plantilla de arriba hacia abajo, así que lo primero que encuentro son los estilos y es lo que vamos a añadir justo antes de ]]></b:skin>

#carrousel ul{
margin:30px 10px;
padding:10px;
width:550px !important; /* ancho del carrousel */
height:100px !important; /* alto del carrousel */
overflow:hidden; /
}
#carrousel li{
margin:10px;
list-style:none;
position:relative;
float:left;
}
#carrousel img{
width: 80px !important; /* ancho de la imagen */
height: 80px !important;
border: 1px solid #ECA475; /* color del borde */
background: #BB2B17; /* color de fondo */
padding:5px; /* espacio entre la imagen y el borde */
cursor: pointer;
display: inline-block;
position: relative;
-moz-transition: opacity .3s linear;  /* efecto opacidad de la imagen */
-webkit-transition: opacity .3s linear;  /* efecto opacidad de la imagen */
-o-transition: opacity .3s linear;  /* efecto opacidad de la imagen */
transition: opacity .3s linear;  /* efecto opacidad de la imagen */
}
#carrousel img:hover {
background-color: #0FF; /* color de fondo al pasar el cursor */
opacity: .5;
filter:alpha(opacity=50);
}

(Es importante que el ancho del carrousel no sea mayor que el espacio disponible en nuestro blog)
Si queremos prescindir del efecto producido por la opacidad omitimos los estilos marcados en color rojo. El resto de estilos que podemos modificar ya tiene indicado a que parte corresponde.

A continuación y si no estamos usando jQuery con anterioridad añadimos la librería justo antes de </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>

Justo después añadimos directamente a la plantilla el plugin y un pequeño script que podemos copiar desde el siguiente archivo de texto. De esa forma evitamos alojamientos externos y los consiguientes problemas que ocasionan.

Guardamos los cambios y nos dirigimos a Diseño para editar un nuevo gadget de HTML, en su interior añadimos el contenido de este archivo de texto.

Encontraremos al final de ese archivo AQUÍ-URL-DEL-BLOG es necesario sustituir esa parte por la url de nuestro blog.

Y eso es todo ver ejemplo en el footer de este blog

Con bastante retraso pero a tiempo para recordar que la fase de inscripción para participar en los Premios 20Blogs en su VI Edición es hasta el próximo 9 de diciembre.

No olvidéis que hay que dar de alta el blog y que es requisito imprescindible participar si queremos tener la posibilidad de votar.

El año pasado los que participamos no tuvimos oportunidad de optar por el premio a Mejor Diseño de blog cosa que este año si será posible, se tendrá en cuenta la originalidad y lo artístico y es un premio que está dotado con 3.000 euros y una estatuilla.
Ver más información sobre premios y bases.

Para hacer esto que pregunta Abraham utilizamos el evento onMouseOver que se ejecuta cuando pasamos la flecha del mouse sobre un objeto en este caso un enlace y el evento onMouseOut cuando la flecha lo abandona.

<a href="url-enlace"><img onmouseout="this.src='url-imagen-1';" onmouseover="this.src='url-imagen-2';" src="url-imagen-1;" /></a>

REFERENCIA:
mazu-mazu ikonki

En Codrops nos tiene acostumbrados a estupendos efectos que invitan a ponerlos en práctica, uno de los últimos trata de una selección de efectos hover para añadir a imágenes y formar así una vistosa galería. En el menú superior de la demo podemos observar el resultado.

La falta de tiempo me impide probar los 10 efectos distintos pero no he podido remediar ver el resultado del ejemplo 3 y tocando un poquito aquí y allá los estilos ha quedado como la muestra con borde en las imágenes, sombra en el texto y cambiando el color de fondo.

Para conseguir un efecto igual nos situamos antes de ]]></b:skin> y añadimos los estilos, es ahí en los estilos dónde veremos las partes que podemos variar como por ejemplo color de texto y fondo para que sea acorde con el sitio.

.view {
    background-color:#FFFFFF;  /* fondo borde */  
    border: 10px solid #FFFFFF;  /* color borde */  
    box-shadow: 2px 3px 5px #696969;  /* sombra borde */ 
    cursor: default;
    float: left;
    height: 200px; /* alto de la imagen */ 
   margin: 10px;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 250px; /* ancho de la imagen */ 
}
.view .mask, .view .content {
    height: 200px; /* alto del contenido es el mismo que el de la imagen */ 
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 250px; /* ancho del contenido es el mismo que de la imagen */ 
}
.view img {
    display: block;
    position: relative;
}
.view h2 {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8);
    color: #FFFFFF;
    font-size: 17px;
    margin: 20px 0 0;
    padding: 10px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
}
.view p {
    color: #FFFFFF;
    font-family: Georgia,serif;
    font-size: 12px;
    font-style: italic;
    padding: 10px 20px 20px;
    position: relative;
    text-align: center;
}
.view a.info {
    display: inline-block;
    padding: 7px 14px;
    text-decoration: none;
    text-transform: uppercase;
}

.view-third img {
   box-shadow: 0 0 1px #000000;
-webkit-transition: all 0.2s ease-in;
   -moz-transition: all 0.2s ease-in;
   -o-transition: all 0.2s ease-in;
   -ms-transition: all 0.2s ease-in;
   transition: all 0.2s ease-in;
}
.view-third .mask {
   background-color: rgba(0,0,0,0.6);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform: translate(460px, -100px) rotate(180deg);
   -moz-transform: translate(460px, -100px) rotate(180deg);
   -o-transform: translate(460px, -100px) rotate(180deg);
   -ms-transform: translate(460px, -100px) rotate(180deg);
   transform: translate(460px, -100px) rotate(180deg);
   -webkit-transition: all 0.2s 0.4s ease-in-out;
   -moz-transition: all 0.2s 0.4s ease-in-out;
   -o-transition: all 0.2s 0.4s ease-in-out;
   -ms-transition: all 0.2s 0.4s ease-in-out;
   transition: all 0.2s 0.4s ease-in-out;
}
.view-third h2 { 
   -webkit-transform: translateY(-100px);
   -moz-transform: translateY(-100px);
   -o-transform: translateY(-100px);
   -ms-transform: translateY(-100px);
   transform: translateY(-100px);
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-third p {
   -webkit-transform: translateX(300px) rotate(90deg);
   -moz-transform: translateX(300px) rotate(90deg);
   -o-transform: translateX(300px) rotate(90deg);
   -ms-transform: translateX(300px) rotate(90deg);
   transform: translateX(300px) rotate(90deg);
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-third a.info {
 -webkit-transform: translateY(-200px);
   -moz-transform: translateY(-200px);
   -o-transform: translateY(-200px);
   -ms-transform: translateY(-200px);
   transform: translateY(-200px);
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-third:hover .mask {
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transition-delay: 0s;
   -moz-transition-delay: 0s;
   -o-transition-delay: 0s;
   -ms-transition-delay: 0s;
   transition-delay: 0s;
   -webkit-transform: translate(0px, 0px);
   -moz-transform: translate(0px, 0px);
   -o-transform: translate(0px, 0px);
   -ms-transform: translate(0px, 0px);
   transform: translate(0px, 0px);
}
.view-third:hover h2 {
 background: none repeat scroll 0 0 #9C1813; /* Título */ 
  border-top: 1px solid #000;  /* color borde top título */ 
  border-bottom: 1px solid #000;  /* color borde bottom título */ 
  text-shadow: 0px 1px 1px #111; /* sombra título */ 
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
   -webkit-transition-delay: 0.5s;
   -moz-transition-delay: 0.5s;
   -o-transition-delay: 0.5s;
   -ms-transition-delay: 0.5s;
   transition-delay: 0.5s;
}
.view-third:hover p {
   -webkit-transform: translateX(0px) rotate(0deg);
   -moz-transform: translateX(0px) rotate(0deg);
   -o-transform: translateX(0px) rotate(0deg);
   -ms-transform: translateX(0px) rotate(0deg);
   transform: translateX(0px) rotate(0deg);
   -webkit-transition-delay: 0.4s;
   -moz-transition-delay: 0.4s;
   -o-transition-delay: 0.4s;
   -ms-transition-delay: 0.4s;
   transition-delay: 0.4s;
}
.view-third:hover a.info {
 background: none repeat scroll 0 0 #9C1813; /* color de fondo enlace leer más */ 
border: 1px solid #000;  /* color borde enlace leer más */    
    color:#FFFFFF; /* color enlace leer más */ 
    text-shadow: 0px 1px 1px #111; /* sombra enlace leer más */
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
   -webkit-transition-delay: 0.3s;
   -moz-transition-delay: 0.3s;
   -o-transition-delay: 0.3s;
   -ms-transition-delay: 0.3s;
   transition-delay: 0.3s;
} 

En un gadget de HTML añadimos lo siguiente:

<div class="view view-third">
<img src="Url-imagen" />
<div class="mask">
<h2>Título</h2>
<p>Cualquier descripción</p>
<a class="info" href="Url-enlace">Leer más</a>
</div>
</div>

En Url-imagen es el lugar para añadir la url de nuestra imagen y en Url-enlace pondremos la url del sitio a enlazar.

Ayer me entero que Blogs Made in SPAIN vuelve a la carga, después de un tiempo en standby regresa ofreciendo los servicios que nos tiene acostumbrados y con novedades.
La novedad que nos trae es el servicio de realización de caricaturas digitales, llamado DIGIcaturas.

El autor A. Zambrana nos explica que son caricaturas digitales personalizadas ideales para imprimir en alta resolución y enmarcar para sobremesa o pared, regalos, invitaciones de boda, tarjetas, cumpleaños, felicitaciones, camisetas, etc...
¿Os imagináis unas invitaciones de boda con la caricatura de los novios? Por 26 euros y mandando la fotografía en menos de 48 horas podemos tener nuestra caricatura. Sin esperas, sin gastos de envío.

Todos vimos ya esa especie de código de barras llamado código QR (Quick Response Barcode) que viene a ser algo así como un sistema para almacenar información.

Para poder leer un código QR es necesario un teléfono móvil, algunas marcas como I Phone, BlackBerry y Nokia ya traen lectores incorporados con los que podremos leer esa información almacenada en el código.

Cuando queremos ver la información guardada solo tenemos que apuntar con la cámara hacia el código QR y nos mostrará en pantalla la información para poder utilizarla.

En Vagabundia encontraremos información si deseamos añadir nuestro código QR en cada entrada del blog.

Los usuarios de Firefox tienen a su disposición un Plugin llamado Mobile Barcoder nos permite crear un código QR seleccionando un texto.

Encontraremos algunos sitios para generar la imagen de nuestro código y conforme pasa el tiempo esos sitios nos van ofreciendo novedades como este de QRhaker.com donde le podemos añadir una imagen o cambiar de color.

Otros sitios generadores de código QR.

uqr.me/
zxing.org
patrick-wied
patrick-wied.at/static
qrcode.kaywa.com

Cuando hablamos de perfil enseguida nos viene a la mente la imagen que nos representa en Blogger con un enlace que dice algo así como "Visita mi perfil" y eso si que es el perfil ese espacio que dice todo lo que nosotros permitimos que diga.

Pero, no tenemos por qué mostrar la imagen del perfil tal y como Blogger dispone en un gadget ni tiene por qué ser la misma imagen que mostramos en el avatar de comentarios, podemos hacer cualquier cosa y eso incluye mostrar una imagen con el texto que nosotros queremos mostrar y enlazarlo a cualquier sitio ya sea el perfil, escritorio o una breve descripción o incluso añadir ahí mismo los iconos a redes sociales.

Es algo así a lo que yo tengo añadido en el footer o lo que añadimos en su día para la información de autor en las entradas. De eso trata la consulta y ahí va una solución.

En plantilla y justo antes de ]]></b:skin> añadimos los estilos.

#deperfiles {
 color: #434040;
 font-family: Georgia,serif;
 font-size: 12px;
 line-height: 1.7;
 margin: 40px 30px 0;
 text-shadow: 0 1px 1px #ccc;
 text-align: justify;
}
#deperfiles img {
border: 3px solid #ffffff;
 border-radius: 2px 2px 2px 2px;
 box-shadow: 1px 1px 1px #333;
 border-radius: 100px 100px 100px 100px;
 float: left;
 margin: 0 25px 5px 0;
 width: 95px;
 opacity:0.9;
}
#deperfiles a:hover img {
opacity: 0.7;
}

Después editamos un nuevo gadget de HTML y en su interior añadimos lo siguiente:

<div id="deperfiles">
<a href="url-enlace"target="_blank">
<img alt='' src='url-imagen'height='95' width='95' /></a> 
<h2>Título</h2>
Texto o información
<div class="clear">
</div></div>

Tendremos algo así:

No digo que sea una novedad ni espectacular pero es un menú muy sencillo, tan sencillo que lo vamos a añadir todo en un gadget de HTML y ahí ya tenemos marcadas las partes que podemos cambiar.

Para los enlaces hacemos como siempre, sustituimos "url-enlace" por la url de nuestro enlace y en "Enlace 1-2-3-4-5-6" por nuestro texto que hará de enlace.

<style>

ul.arrowunderline{

list-style-type:none;

margin:0;

padding:0;

text-align:center; /*  puede ser "left", "right" o "center"  */

font: bold 18px Georgia; /* tamaño de fuente */

}

ul.arrowunderline li{

display:inline;

margin-right:25px; /* espacio entre enlaces */

}

ul.arrowunderline li a{ /* el color de texto es black */

position:relative;

color:black;

padding-bottom:8px; /* espacio entre la flecha y el texto */

text-decoration:none;

}

ul.arrowunderline li a:hover{

border-bottom:3px solid red; /* grosor línea de la flecha el color es red */

}

ul.arrowunderline li a:hover:after{

content:'';

width:0;

height:0;

position:absolute;

left:50%;

margin-left:-5px;

bottom: 0;

border-width:5px;

border-style:solid;

border-color: transparent transparent red transparent; /* el color de la flecha es red */

}

</style>

<ul class="arrowunderline">

<li><a href="url-enlace">Enlace 1</a></li>

<li><a href="url-enlace">Enlace 2</a></li>

<li class="selected"><a href="url-enlace">Enlace 3</a></li>

<li><a href="url-enlace">Enlace 4</a></li>

<li><a href="url-enlace">Enlace 5</a></li>

<li><a href="url-enlace">Enlace 6</a></li>

</ul>

Ya llega la VI Edición de los Premios 20Blogs, algo más tarde que en años anteriores pero con sorpresas y novedades.

Se habla de categorías inéditas y sorpresas, para descubrir de qué trata y alguna exclusiva que dicen tener bien guardada nos invitan a asistir a la Jornada BLOGSCOM.

Lugar: Facultad de Ciencias de la Información de la UCMDía: 7 de noviembre de 2011Hora: de 09:45 a 14:00 horas.Entrada libre hasta completar aforo.

Para estar bien informado en el blog de José María Martín 20minutos.es , Premios 20Blogs y laBlogoteca.

Lo que me gustan estos sitios que ofrecen texturas ¿quieres una textura de cuadritos? click en la imagen y vemos como queda el efecto de cuadritos, que queremos una textura de nubes pues click sobre la imagen y vemos como queda la de nubes así de fácil y así de rápido es decidirse.

En tonos claros, sencillos y elegantes y en 3Quarks en la sección de Background y Patterns.

DEMO Y DECARGA

Halloween es una plantilla para Blogger que resulta divertida y muy indicada para estas fechas, la descarga es gratuita y es una aportación de reinventaWEB. 

En su diseño se han utlizado las fuentes de Google, resultan muy llamativos los efectos conseguidos creados todos con CSS (véase título y enlaces)

En la página principal la sidebar queda oculta, tiene un footer dividido en tres columnas y no utiliza ninguna clase de scripts. Es fácilmente personalizable.

El ZIP contiene la plantilla en formato XML y una copia de todas las imágenes necesarias.

Si no queremos cambiar de plantilla pero si decorar nuestro PC podemos lucir un wallpaper de Wallpapers a full  los encontraremos muy originales y atrevidos. 

Referencia y Descarga

No busquemos iconos muy bellos porque la ocasión los requiere horrorosos y si son simpáticos como estos de Free Icons Web mucho mejor.

Referencia y Descarga